/**
 * 个人界面路由容器主界面
 */
import React from 'react'
import { Result, List, WhiteSpace, Button, Modal } from 'antd-mobile'
import { connect } from 'react-redux'

import Cookies from 'js-cookie'
import {resetUser} from '../../redux/actions'

const Item = List.Item
const Brief = Item.Brief

class Personal extends React.Component {

  loginOut = () => {
    // 登出
    Modal.alert('退出', '确认退出登录吗?', [
      { text: '取消' },
      { text: '确认', onPress: ()=>{
        // 退出登录
        // 将cookie-userid
        Cookies.remove('userId')
        // 删除redux-user对象清除
        this.props.resetUser()
        
      }}
    ])
  }

  render() {
    const { user } = this.props
    return (
      <div>
        <Result
          img={<img src={require(`../../assets/headers/${user.header}.png`)} style={{ width: 50 }}
            alt="header" />}
          title={user.username}
          message={user.company}
        />
        <List renderHeader={() => '相关信息'}>
          <Item multipleLine>
            <Brief>职位: {user.post}</Brief>
            <Brief>简介: {user.info}</Brief>
            {user.salary ? <Brief>薪资: {user.salary}</Brief> : null}
          </Item>
        </List>
        <WhiteSpace />
        <List>
          <Button type='warning' onClick={this.loginOut}>退出登录</Button>
        </List>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  {resetUser}
)(Personal)